page {
  width: 100%;
  height: 100%;
}

.flex-box {
  display: flex;
  width: 100%;
  /* height: 100% */
}

.flex-item {
  flex: 1 1 auto;
}


.row {
  flex-direction: row;
}

.row.reverse {
  flex-direction: row-reverse;
}

.column {
  flex-direction: column;
}

.column .flex {
  max-width: 100%;
}

.column.reverse {
  flex-direction: column-reverse;
}

.wrap {
  flex-wrap: wrap;
  /* 单行显示， 按照书写方式ltr */
}

.nowrap {
  flex-wrap: nowrap;
}



/*
换行，行顺序相反
 */

.wrap-reverse {
  flex-wrap: wrap-reverse;
}



/*
在主轴上对齐伸缩项目
 */

.justify-center {
  justify-content: center;
}



/*
为flex-start，非start
 */

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}



/*
伸缩项目平均分布在行内，最前及最末项目与容器两边对齐
 */

.justify-space-between {
  justify-content: space-between;
}



/*
伸缩项目平均分布在行内，最前及最末项目与容器两边保留一般空间
 */

.justify-space-around {
  justify-content: space-around;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-baseline {
  align-items: baseline;
}



/*
侧轴长度属性为auto时，使项目尺寸在height等属性限制先尽可能接近所在行尺寸
 */

.align-stretch {
  align-items: stretch;
}



/*
如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效。其它情况下，该值将参与基线对齐
 */

.align-items-baseline {
  align-items: baseline;
}



/*
只作用于多行的flexbox
 */

.align-content-start {
  align-content: flex-start;
}

.align-content-center {
  align-content: center;
}

.align-content-end {
  align-content: flex-end;
}

.align-content-stretch {
  align-content: stretch;
}

.align-content-space-around {
  align-content: space-around;
}

.align-content-space-between {
  align-content: space-between;
}




/*
在flex-item上覆写默认的对齐方式
 */

.align-self-start {
  align-self: flex-start;
}

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}



/*
根据order重新排序
 */

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}



.fb-1 {
  flex-basis: 8.3333333333%;
  flex-grow: 0;
  max-width: 8.3333333333%;
}

.fb-2 {
  flex-basis: 16.6666666667%;
  flex-grow: 0;
  max-width: 16.6666666667%;
}

.fb-3 {
  flex-basis: 25%;
  flex-grow: 0;
  max-width: 25%;
}

.fb-4 {
  flex-basis: 33.333333333%;
  flex-grow: 0;
  max-width: 33.333333333%;
}

.fb-5 {
  flex-basis: 41.666666667%;
  flex-grow: 0;
  max-width: 41.666666667%;
}

.fb-6 {
  flex-basis: 50%;
  flex-grow: 0;
  max-width: 50%;
}

.fb-7 {
  flex-basis: 58.3333333333%;
  flex-grow: 0;
  max-width: 58.3333333333%;
}

.fb-8 {
  flex-basis: 66.666666667%;
  flex-grow: 0;
  max-width: 66.666666667%;
}

.fb-9 {
  flex-basis: 75%;
  flex-grow: 0;
  max-width: 75%;
}

.fb-10 {
  flex-basis: 83.333333333%;
  flex-grow: 0;
  max-width: 83.333333333%;
}

.fb-11 {
  flex-basis: 91.666666667%;
  flex-grow: 0;
  max-width: 91.666666667%;
}

.fb-12 {
  flex-basis: 100%;
  flex-grow: 0;
  max-width: 100%;
}

.m-1 {
  margin: 12px;
}

.mx-1 {
  margin-left: 12px;
  margin-right: 12px;
}

.my-1 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: 12px;
}
